<!-- Common Header -->
<div style="display: flex; align-items: center; justify-content: center; flex-direction:column; margin-bottom:30px;">
    <img src="https://octoeverywhere.com/img/logo.png" height="90px" width="90px" />
    <h3>OctoEverywhere</h3>
</div>

<!-- Printer Not Setup UI -->
<div id="octoeverywhere-printer-not-setup">
    <p style="padding-bottom:10px">Blast off 🚀 with <a href="https://octoeverywhere.com">OctoEverywhere.com</a>! Access your full OctoPrint portal, printer controls, camera streams, and plugins from anywhere! OctoEverywhere works on your desktop, laptop, tablet, phone, and your favorite OctoPrint apps!</p>
    <p style="padding-bottom:10px">OctoEverywhere is <b>free, secure, and super easy to setup!</b></p>
    <p>
        <a class="btn btn-primary" target="_blank" href="" data-bind="attr: { href: settings.plugins.octoeverywhere.AddPrinterUrl } ">Finish Your Two Minute Setup Now!&nbsp;&nbsp;<i class="fa fa-external-link"></i></a>
    </p>
</div>

<!-- Printer Setup UI -->
<div id="octoeverywhere-setup-complete" style="display:none">
    <p style="">✅ Your printer is connected and ready to go!</p>
    <p style="">You can access your printer anytime, anywhere, on any device at <a target="_blank" style="color:white;text-decoration:underline" href="https://octoeverywhere.com/dashboard?source=plugin_settings">OctoEverywhere.com</a></p>

    <p style="padding-bottom:5px;padding-top:30px;font-size:24px;color:#78a4fa">Your Favorite OctoPrint Apps Work Anywhere</p>
    <p style="padding-bottom:10px">Experience the full power of your favorite OctoPrint app from anywhere, including full frame rate and full resolution webcam streaming. <b>Try it now, it takes less than 30 seconds to setup!</b></p>
    <div style="display:flex; align-items:center; justify-content:center;">
        <div style="display:flex; flex-direction:row">
            <div class="oe-appBox">
                <div>
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_octopod&interest=octopod"><img src="https://octoeverywhere.com/img/appsetup/octopod.png" class="oe-appIcon" /></a>
                </div>
                <div class="oe-appTitle">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_octopod&interest=octopod">OctoPod</a>
                </div>
                <div class="oe-appiOS">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_octopod&interest=octopod">For iOS</a>
                </div>
            </div>
            <div class="oe-appBox">
                <div>
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_polymer&interest=polymer"><img src="https://octoeverywhere.com/img/appsetup/polymer.png" class="oe-appIcon" /></a>
                </div>
                <div class="oe-appTitle">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_polymer&interest=polymer">Polymer</a>
                </div>
                <div class="oe-appiOS">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_polymer&interest=polymer">For iOS</a>
                </div>
            </div>
            <div class="oe-appBox">
                <div>
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_printoid&interest=printoid"><img src="https://octoeverywhere.com/img/appsetup/printoid.png" class="oe-appIcon" /></a>
                </div>
                <div class="oe-appTitle">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_printoid&interest=printoid">Printoid</a>
                </div>
                <div class="oe-appAndroid">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_printoid&interest=printoid">For Android</a>
                </div>
            </div>
            <div class="oe-appBox">
                <div>
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_octoapp&interest=octoapp"><img src="https://octoeverywhere.com/img/appsetup/octoapp.png" class="oe-appIcon" /></a>
                </div>
                <div class="oe-appTitle">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_octoapp&interest=octoapp">OctoApp</a>
                </div>
                <div class="oe-appAndroid">
                    <a target="_blank" href="https://octoeverywhere.com/appsetup?source=plugin_settings_octoapp&interest=octoapp">For Android</a>
                </div>
            </div>
        </div>
    </div>

    <p style="padding-bottom:5px;padding-top:50px;font-size:24px;color:#78a4fa">Free & Unlimited AI Print Failure Detection</p>
    <p style="padding-bottom:5px"><strong>Say hello to Gadget!</strong> Gadget uses state-of-the-art machine learning algorithms to continuously monitor your prints and take action when many common printing failures are detected. We are proud to offer Gadget free and unlimited for the entire maker community.</p>
    <p style="margin-bottom:20px">
        <a class="btn btn-primary" target="_blank" href="https://octoeverywhere.com/gadget?source=plugin_settings">Enable Gadget Now</a>
    </p>

    <p style="padding-bottom:5px;padding-top:30px;font-size:24px; color:#78a4fa">Free & Instant Printer Notifications</p>
    <p style="padding-bottom:5px;">Setup alerts for print progress, print completion, print errors, filament changes, and so more! Our notifications include a wealth of information and high-resolution screenshots. We can send you notifications via <b>Email, SMS, Discord, Telegram, Windows, Mac, Android, Slack, Pushover, Pushbullet, and WebHooks.</b></p>
    <p style="margin-bottom:20px">
        <a class="btn btn-primary" target="_blank" href="https://octoeverywhere.com/notifications?source=plugin_settings">Setup Your Notifications Now</a>
    </p>
</div>

<!-- Common Footer -->
<br/>
<p>
    <a href="https://octoeverywhere.com/support">Need help or want to send feedback?</a>
</p>
<br/>
<div>
    <div>
        <small>
            <a href="#" class="muted" onclick="$(this).children().toggleClass('fa-caret-right fa-caret-down').parent().parent().parent().next().slideToggle('fast')"><i class="fa fa-caret-right"></i> Advanced</a>
        </small>
    </div>
    <div class="hide">
        <div class="control-group">
            <label class="control-label" style="padding-top:20px;">Your Printer Id: <strong>(don't share this!)</strong></label>
            <div class="controls">
                <span data-bind="text: settings.plugins.octoeverywhere.PrinterKey"></span>
            </div>
        </div>
    </div>
</div>